import * as React from 'react';
import Box from '@/commonComponents/box/index';
import './index.module.scss';
import { Button, Modal } from 'antd-mobile';
import OccupyDialog from '../occupyDialog/index';
const { memo, useState } = React;
import { useNavigate } from 'react-router-dom';

interface AccountProps {
  data?: number[];
  isLoading?: boolean;
  price?: number;
  length: number;
  departDate: number | null;
  arriveDate: number | null;
  departTimeStr: string;
  arriveTimeStr: string;
  trainNumber: string;
  departStation: string;
  arriveStation: string;
  durationStr: string | null;
  passengers: any;
  aTime: string;
  dTime: string;
  time: string;
}

function Account(props: AccountProps) {
  const {
    departDate,
    arriveDate,
    departTimeStr,
    arriveTimeStr,
    trainNumber,
    departStation,
    arriveStation,
    durationStr,
    passengers,
    price = 0,
    length,
    aTime,
    dTime,
    time,
  } = props;
  const navigate = useNavigate();
  const [expanded, setExpanded] = useState(false);
  const [progress, setProgress] = useState(0);
  const [modalVisiable, setModalVisibale] = useState(false);
  React.useEffect(() => {
    let timeId: ReturnType<typeof setInterval>;
    if (modalVisiable) {
      timeId = setInterval(() => {
        if (progress < 100) {
          setProgress(progress + 10);
        } else if (progress >= 100) {
          setModalVisibale(false);
          navigate(
            `/orderDetail?orderId=1&boxShow=false&orderStatus=2&departDate=${departDate}&arriveDate=${arriveDate}`
          );
        }
      }, 100);
    }
    return () => {
      clearInterval(timeId);
    };
  }, [progress, modalVisiable]);
  return (
    <Box data={[1]} isLoading={false} styleName="account">
      <div
        styleName={expanded ? 'price' : 'price expanded'}
        onClick={() => setExpanded(!expanded)}
      >
        <div styleName="money">{length * price}</div>
        <div styleName="amount">支付金额</div>
      </div>
      <Button
        block
        styleName="submit-button"
        onClick={() => setModalVisibale(true)}
      >
        提交订单
      </Button>
      <div
        styleName={expanded ? 'layer' : 'layer hidden'}
        onClick={() => setExpanded(false)}
      ></div>
      <div styleName={expanded ? 'detail' : 'detail hidden'}>
        <div styleName="title">金额详情</div>
        <ul>
          <li>
            <span>火车票</span>
            <span>￥{price}</span>
            <span>&#xD7;{length}</span>
          </li>
        </ul>
      </div>
      <Modal
        visible={modalVisiable}
        destroyOnClose={true}
        content={
          <OccupyDialog
            progress={progress}
            price={price}
            length={price}
            departDate={departDate}
            arriveDate={arriveDate}
            departTimeStr={departTimeStr}
            arriveTimeStr={arriveTimeStr}
            trainNumber={trainNumber}
            departStation={departStation}
            arriveStation={arriveStation}
            durationStr={durationStr}
            passengers={passengers}
          />
        }
      ></Modal>
    </Box>
  );
}

export default memo(Account);
